<style>
.el-table .warning-row {
  background: oldlace;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.bodyDiv {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>

<template>
  <div class="bodyDiv">
    <el-card style="width: 1200px;height:auto;margin: 0 auto;">
      <div style="width: 1155px;height:auto;margin: 0 auto;padding-top: -5px">
        <el-button style="margin-bottom:10px;" type="warning" @click="goAddNew()" round>发布报备</el-button>
        <span style="margin-left:400px;color: #409EFF; font-size: 24px;font-weight: bold">我的返乡报备</span>
        <el-table
            border
            :data="returnHomeData"
            style="width: 100%"
            :row-class-name="tableRowClassName">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="出发地点">
                  <span>{{ props.row.startPlace }}</span>
                </el-form-item>
                <el-form-item label="返乡时间">
                  <span>{{ props.row.returnDate }}</span>
                </el-form-item>
                <el-form-item label="十五天轨迹">
                  <span>{{ props.row.halfMonthPast }}</span>
                </el-form-item>
                <el-form-item label="经过疫区">
                  <span>{{ props.row.throughDangerArea }}</span>
                </el-form-item>
                <el-form-item label="身体状态">
                  <span>{{ props.row.bodyStatus }}</span>
                </el-form-item>
              </el-form>
            </template>
          </el-table-column>
          <el-table-column
              label="报备时间"
              prop="gmtCreate" header-align="center" align="center">
          </el-table-column>
          <el-table-column
              label="体温"
              prop="temperature" header-align="center" align="center">
          </el-table-column>
          <el-table-column prop="nucleicReport" label="核酸报告" header-align="center" align="center" width="200">
            <template slot-scope="scope">
              <img
                  style="width: 100px; height: 100px"
                  :src="scope.row.nucleicReport==null?'':require('../img/user/'+scope.row.nucleicReport)"/>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true"
              label="审核回复" header-align="center" align="center">
            <template slot-scope="scope">
            <el-tag :type="scope.row.reviewResponse=='0'?'warning':'primary'">
              <span>{{ scope.row.reviewResponse == '0' ? '待审核' : scope.row.reviewResponse }}</span>
            </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button round type="primary" @click="goUpdate(scope.row)">修改</el-button>
              <el-popconfirm
                  @confirm="deleteReport(scope.row)"
                  confirm-button-text='确定'
                  cancel-button-text='取消'
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定要删除该报备吗？">
                <el-button slot="reference" round type="danger">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!--  分页  -->
    <div class="block" align="center" style="margin-top: 20px;margin-bottom: 5px">
      <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="this.totalCount">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      pageSize: 4,
      totalCount: 0,
      returnHomeData: [],
    }
  },
  methods: {
    //删除报备
    deleteReport(report) {
      this.axios.create({'headers': {'Authorization': localStorage.getItem('userJwt')}})
          .get('http://localhost:8080/returnHome/' + report.id + '/delete').then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.$notify.success({
            title: '提示',
            message: '删除报备成功！',
            showClose: false,
            position: 'top-left'
          });
          this.showMyReturnList();
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: false,
            position: 'top-left'
          });
          this.showMyReturnList();
        }
      });
    },

    //前往发布报备！
    goAddNew() {
      this.$router.push('/sys-user/returnHomeAddNew');
    },

    //前往修改报备
    goUpdate(report) {
      localStorage.setItem('returnReportId', report.id);
      this.$router.push('/sys-user/returnHomeUpdate');
    },

    //处理当前页
    handleCurrentChange(val) {
      this.page = val;
      this.showMyReturnList();
      console.log(`当前页: ${val}`);
    },

    //表格状态
    tableRowClassName({row, rowIndex}) {
      if (row.temperature >= 37) {
        return 'warning-row';
      }
      return '';
    },

    //展示我的报备列表
    showMyReturnList() {
      let url = 'http://localhost:8080/returnHome/page/' + this.page + '/' + this.pageSize;
      console.log('我的报备展示请求的url是' + url);
      this.axios.create({'headers': {'Authorization': localStorage.getItem('userJwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          this.returnHomeData = responseBody.data.list;
          this.totalCount = responseBody.data.totalCount;
        } else if (responseBody.state == 40100) {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: true,
            position: 'top-right'
          });
          this.$router.push('/login');
        } else {
          this.$notify.warning({
            title: '提示',
            message: responseBody.message,
            showClose: false,
            position: 'top-left'
          });
        }
      })
    }
  },
  mounted() {
    this.showMyReturnList();
  }
}
</script>